<template>
    <Headersh>
        <template v-slot:left>
            <div>
                <img src="https://yanxuan.nosdn.127.net/8945ae63d940cc42406c3f67019c5cb6.png" alt="">
                <span><p class="wenzish">
                    用户346872215623</p>
                    <p class="wenziSh">普通用户</p>
              </span>
            </div>
        </template>
        <template v-slot:right>
            <div class="rightsh">
                <a href="https://m.you.163.com/lead/newIndex?qrType=3&defaultTab=1&_stat_referer=userPage">
                    <div class="icon-erweima">
                    </div>
                </a>
                <router-link to="">
<!--                    后面链接页面-->
                <div class="ProHuiYuan">
                    <div class="word">
                        <div class="icon-shandian"></div>
                        <div class="line1">Pro会员</div>
                        <div class="line2">立即开通
                            <svg class="iconsh">
                                <use xlink:href="#icon-anniu-jiantouxiangyou_o"></use>
                            </svg>

                        </div>
                    </div>
                </div>
                </router-link>
            </div>
        </template>
    </Headersh>
    <ZiChansh/>
    <Listsh/>
    <TuiChush/>
</template>

<script>
    import Headersh from "../components/Profile/Headersh.vue";
    import ZiChansh from "../components/Profile/ZiChansh.vue";
    import Listsh from "../components/Profile/Listsh.vue";
    import TuiChush from "../components/Profile/TuiChush.vue";

    export default {
        name: "ProfileView",
        components: {Headersh, ZiChansh, Listsh, TuiChush}
    }
</script>

<style scoped>
    div {
        width: 100%;
    }

    img {
        border-radius: 100%;
        width: 25%;
        margin-top: 3em;
        margin-left: 1.1em;
        margin-bottom: 3em;
        vertical-align: center;
    }

    span {
        float: right;
        margin-top: 20%;
        color: white;
        width: 65%;
        overflow: hidden;
    }

    p {
        font-size: 18px;
    }

    .wenzish {
        overflow: hidden;
    }

    .wenziSh {
        font-size: 14px;
    }

    .rightsh {
        width: 100%;
        height: 100%;
        float: right;
    }

    .ProHuiYuan {
        margin-top: 20px;
        height: 25%;
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#574e44), to(#0e0e0e));
        background-image: linear-gradient(180deg, #574e44, #0e0e0e);
        font-size: 12px;
    }

    .word {
        color: #f9e0c0;
        margin-top: 20px;
        margin-left: 5px;
        vertical-align: center;

    }

    .line1 {
        height: 15px;
        margin-top: 15px;
    }

    .line2 {
        font-size: 12px;
    }

    .icon-erweima {
        background-image: url("https://yanxuan-static.nosdn.127.net/hxm/yanxuan-mall-wap/assets/img/ucenter-11eb865ad061b2dd08d2ec54d87461d6.png");
        background-size: 200px 200px;
        width: 50px;
        height: 50px;
        vertical-align: middle;
        margin-top: 20%;
        margin-left: 50%;

    }

    .icon-shandian {
        background-image: url("https://yanxuan-static.nosdn.127.net/hxm/yanxuan-mall-wap/assets/img/ucenter-11eb865ad061b2dd08d2ec54d87461d6.png");
        background-size: 210px 210px;
        background-position: -3em -4.2em;
        width: 3.5em;
        height: 3.5em;
        vertical-align: middle;
        float: left;
        margin-left: -5px;
    }

    .iconsh {
        width: 15px;
        height: 15px;
    }
</style>